<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
				<el-breadcrumb-item>活动详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="main_head">
				<div class="iut1"><el-input v-model="input" placeholder="请输入万车会券号/手机号/车牌号"></el-input></div>
				<div>
					<el-button type="primary" icon="el-icon-search">查询</el-button>
					<el-button type="primary" icon="el-icon-refresh">重置</el-button>
				</div>
			</div>
			<el-button type="primary" icon="el-icon-plus">新增</el-button>
			<div class="main_1">
				<div>
					已选择
					<span style="color: rgba(37, 143, 251, 1);">0</span>
					项
				</div>
				<div>清空</div>
			</div>
			<!-- <div class="table_box" style="border: 1px solid red;width: 500px;overflow-x: scroll;"> -->
				<el-table fit="false" @select='selectCall' @cell-click="xs" max-height="280" border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column  type="selection" width="55"></el-table-column>
					<el-table-column  label="操作" width="200" fixed>
						<template slot-scope="scope" >
							<div class="caozuo">详情</div>
						</template>
					</el-table-column>
					<el-table-column  prop="name" label="发送时间"></el-table-column>
					<el-table-column  prop="name" label="发放类别"></el-table-column>
					<el-table-column  prop="name" label="有效期(至)" width="110"></el-table-column>
					<el-table-column  prop="name" label="优惠券类别" width="110"></el-table-column>
					<el-table-column  prop="name" label="最低消费"></el-table-column>
					<el-table-column  prop="name" label="车主姓名"></el-table-column>
					<el-table-column  prop="name" label="车牌号"></el-table-column>
					<el-table-column  prop="name" label="VIN号码"></el-table-column>
					<el-table-column  prop="name" label="固值"></el-table-column>
					<el-table-column  prop="name" label="消费时间"></el-table-column>
					<el-table-column  prop="name" label="消费地点"></el-table-column>
					<el-table-column  prop="name" label="券状态"></el-table-column>
					<el-table-column  label="操作" width="200">
						<template slot-scope="scope">
							<div class="caozuo">
								<div>核销</div>
								<div class="line2">|</div>
								<div>
									<el-dropdown>
									  <span class="el-dropdown-link gd">
									    更多<i class="el-icon-arrow-down el-icon--right"></i>
									  </span>
									  <el-dropdown-menu slot="dropdown">
									    <el-dropdown-item>黄金糕</el-dropdown-item>
									    <el-dropdown-item>狮子头</el-dropdown-item>
									    <el-dropdown-item>螺蛳粉</el-dropdown-item>
									    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
									    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
									  </el-dropdown-menu>
									</el-dropdown>
								</div>
								<div class="line2">|</div>
								<div>使用规则</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<!-- </div> -->
				<div style="margin-top: 20px">
					<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
					<el-button @click="toggleSelection()">取消选择</el-button>
				</div>
			<div class="pagination"><el-pagination layout="prev, pager, next" :total="1000"></el-pagination></div>
			<div class="line"></div>
			<div class="">
				
			</div>
			<div class="zhuyi">
				<div style="font-size: 14px;">注意：</div>
				<div>1、确认验券之前，请确认已经为客人按照订单项目服务完毕；</div>
				<div>2、如果用户有增加项目，请确认订单不差价部分价格无误</div>
				<div>3、如客户有疑问，请建议客户咨询万车会客服，24小时客服电话：0592-5740011</div>
			</div>
			<!-- 弹窗 -->
			<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
			<el-dialog
			  title="编辑"
			  :visible.sync="dialogVisible"
			  width="64%"
			  :before-close="handleClose">
			  <span>
				<div class="tc_box">
					<div class="tc_title">核销单</div>
					<el-form ref="form" class="form"  label-width="80px">
						<el-form-item label="活动名称">
							<el-input></el-input>
						</el-form-item>
						<el-form-item label="活动名称">
						    <el-input></el-input>
						</el-form-item>
						<el-form-item label="活动名称">
						    <el-input></el-input>
						</el-form-item>
						<el-form-item label="活动名称">
						    <el-input></el-input>
						</el-form-item>
						<el-form-item label="活动名称">
						    <el-input></el-input>
						</el-form-item>
					</el-form>
					  	
				  </div>
			  </span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				xiangqing:false,
				dialogVisible: false,//弹窗的控制
				input: '',
				tableData: [
					{
						date: '2016-05-03',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-02',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-04',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-01',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-08',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-06',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-07',
						name: '王小虎',
						address: '上海市普陀区金沙江路 1518 弄'
					}
				],
				multipleSelection: []
			};
		},
		methods: {
			xs(row, column, event){
				console.log(row, column, event)
			},
			selectCall(selection){
				console.log(selection)
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				  .then(_ => {
					done();
				  }) 
				  .catch(_ => {});
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		}
	};
</script>

<style scoped>
	.gd{
		color: rgba(37, 143, 251, 1);
		font-size: 10px;
	}
	.form{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.tc_title{
		color: rgba(16, 16, 16, 1);
		font-size: 20px;
		text-align: center;
		font-family: SourceHanSansSC-regular;
		margin-bottom: 27px;
	}
	.tc_box{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		border: 1px solid #F5F5F5;
	}
	.caozuo{
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: rgba(37, 143, 251, 1);
		font-size: 10px;
		font-family: Roboto;
	}
	.zhuyi{
		line-height: 34px;
		color: rgba(89, 89, 89, 1);
		font-size: 12px;
		font-family: Roboto;
		margin-top: 17px;
	}
	.line{
		height: 0;
		opacity: 0.5;
		border: 1px solid rgba(187, 187, 187, 1);
	}
	.pagination{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 43px;
	}
	.table_box{
		border: 1px solid #f5f5f5;
		max-height: 280px;
		overflow: hidden;
		overflow-y: scroll;
		margin-bottom: 23px;
	}
	.main_1 :nth-child(2) {
		color: rgba(37, 143, 251, 1);
		font-size: 14px;
		font-family: Microsoft Yahei;
		margin-left: 24px;
	}
	.main_1 {
		height: 38px;
		border-radius: 5px;
		background-color: rgba(227, 247, 255, 1);
		border: 1px solid rgba(153, 220, 254, 1);
		padding: 0 31px;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 24px 0 18px 0;
		color: rgba(102, 102, 102, 0.73);
		font-size: 14px;
		font-family: Roboto;
	}
	.iut1 {
		width: 342px;
		margin-right: 70px;
		/* margin-bottom: 25px; */
	}
	.main_head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20px;
		flex-wrap: wrap;
	}
	.main {
		height: calc(100vh - 135px);
		background: #ffffff;
		padding: 27px 33px;
		box-sizing: border-box;
	}
	.crumbs {
		height: 55px;
		background: #ffffff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 32px;
		box-sizing: border-box;
		margin-bottom: 8px;
	}
</style>
